﻿<!DOCTYPE html>
<!--行为安全观察与沟通频次管理-设置频次-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <style>
    .el-radio{
        top:-4px
    }
    </style>
</head>

<body>
    
<div id="app" v-cloak>   
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px" size="mini"
            label-position="right">
            <el-row style="padding: 10px;">
                <el-col :span="24" style="padding-top: 2px;">
                    <el-checkbox v-model="Form.Frequency.IsNot" @change="IsNotRemind">
                        {{BehaviorSafetyCommunicationFrequency.IsNotRemind}}</el-checkbox>
                </el-col>
                <br>
                <br>
                <el-col :span="8">
                    <el-form-item :label="BehaviorSafetyCommunicationFrequency.MoveUp">
                        <el-input v-model="Form.Frequency.MoveUp" :disabled="Dom.RadioDisabled" style="width:50px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div class="el-form-item el-form-item--feedback el-form-item--mini">
                        <label class="el-form-item__label"
                            style="width: 100px;text-align: left;padding-left:12px;">{{BehaviorSafetyCommunicationFrequency.Reminding}}</label>
                    </div>
                </el-col>
            </el-row>
           
        
            <el-row style="padding: 10px;">
                <el-col :span="3" style="padding-top: 8px;">
                    <el-radio  v-model="Form.Frequency.Type" :disabled="Dom.RadioDisabled" @change="RadioIsNotRemind"
                        label="Month">{{BehaviorSafetyCommunicationFrequency.AccordingMonth}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingMonth_Day" size="mini"
                        :disabled="Dom.SelectDisabled.AccordingMonth_SelectDisabled" placeholder="日">
                        <el-option v-for="item in day" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingMonth_Hour" size="mini"
                        :disabled="Dom.SelectDisabled.AccordingMonth_SelectDisabled" placeholder="时">
                        <el-option v-for="item in hour" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>
 
            <el-row style="padding: 10px;">
                <el-col :span="3" style="padding-top: 8px;">
                    <el-radio  v-model="Form.Frequency.Type" :disabled="Dom.RadioDisabled" @change="RadioIsNotRemind"
                        label="Week">{{BehaviorSafetyCommunicationFrequency.AccordingWeek}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingWeek_Week" size="mini"
                        :disabled="Dom.SelectDisabled.AccordingWeek_SelectDisabled" placeholder="星期">
                        <el-option v-for="item in week" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingWeek_Hour" size="mini"
                        :disabled="Dom.SelectDisabled.AccordingWeek_SelectDisabled" placeholder="时">
                        <el-option v-for="item in hour" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    &nbsp;
                </el-col>
                <el-col :span="2">
                    &nbsp;
                </el-col>
            </el-row>

         
            <el-row style="padding: 10px;">
                <el-col :span="3" style="padding-top: 8px;">
                    <el-radio  v-model="Form.Frequency.Type" :disabled="Dom.RadioDisabled" @change="RadioIsNotRemind"
                        label="Day">{{BehaviorSafetyCommunicationFrequency.AccordingDay}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingDay_Hour" size="mini"
                        :disabled="Dom.SelectDisabled.AccordingDay_SelectDisabled" placeholder="时">
                        <el-option v-for="item in hour" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>

            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>
                    
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
    <script type="text/javascript">
        app = new Vue({
            id: '',
            el: '#app',
            data: {
                Dom: {
                    //值
                    Value: {
                        AccordingYear_Month: '',//按年-月
                        AccordingYear_Day: '',//按年-日
                        AccordingYear_Hour: '',//按年-时
                        AccordingHalfYear_Month: '',//按半年-月
                        AccordingHalfYear_Day: '',//按半年-日
                        AccordingHalfYear_Hour: '',//按半年-时
                        AccordingQuarter_Month: '',//按季度-月
                        AccordingQuarter_Day: '',//按季度-日
                        AccordingQuarter_Hour: '',//按季度-时
                        AccordingDay_Hour: '',//按日-时
                        AccordingMonth_Day: '',//按月-日
                        AccordingMonth_Hour: '',//按月-时
                        AccordingTenDay_Day: '',//按旬-日
                        AccordingTenDay_Hour: '',//按旬-时
                        AccordingWeek_Week:'',//按周-周
                        AccordingWeek_Hour: '',//按周-时
                        Customized_Text: ''//自定义
                    },
                    //radio开关，true为禁用
                    RadioDisabled: true,
                    //select开关，true为禁用
                    SelectDisabled: {
                        AccordingYear_SelectDisabled: true,
                        AccordingHalfYear_SelectDisabled: true,
                        AccordingQuarter_SelectDisabled: true,
                        AccordingMonth_SelectDisabled: true,
                        AccordingTenDay_SelectDisabled: true,
                        AccordingWeek_SelectDisabled: true,
                        AccordingDay_SelectDisabled: true,
                        Customized_SelectDisabled: true,
                    }
                },
                //业务表单内容
                Form: {
                    //id: '',
                    Frequency: {
                        IsNot: false,//是否提醒
                        Month:1,//月
                        Week:1,//周
                        Day: 1,//日
                        Hour: 1,//时
                        Text:1,//自定义内容
                        Type:1,//radio选中类型
                        MoveUp: '1',//天数
                    },//提醒频次
                },
                //select的绑定值
                
                day: [
                    {
                        value: 1,
                        label: '1日'
                    },
                    {
                        value: 2,
                        label: '2日'
                    },
                    {
                        value: 3,
                        label: '3日'
                    },
                    {
                        value: 4,
                        label: '4日'
                    },
                    {
                        value: 5,
                        label: '5日'
                    },
                    {
                        value: 6,
                        label: '6日'
                    },
                    {
                        value: 7,
                        label: '7日'
                    },
                    {
                        value: 8,
                        label: '8日'
                    },
                    {
                        value: 9,
                        label: '9日'
                    },
                    {
                        value: 10,
                        label: '10日'
                    },
                    {
                        value: 11,
                        label: '11日'
                    },
                    {
                        value: 12,
                        label: '12日'
                    },
                    {
                        value: 13,
                        label: '13日'
                    },
                    {
                        value: 14,
                        label: '14日'
                    },
                    {
                        value: 15,
                        label: '15日'
                    },
                    {
                        value: 16,
                        label: '16日'
                    },
                    {
                        value: 17,
                        label: '17日'
                    },
                    {
                        value: 18,
                        label: '18日'
                    },
                    {
                        value: 19,
                        label: '19日'
                    },
                    {
                        value: 20,
                        label: '20日'
                    },
                    {
                        value: 21,
                        label: '21日'
                    },
                    {
                        value: 22,
                        label: '22日'
                    },
                    {
                        value: 23,
                        label: '23日'
                    },
                    {
                        value: 24,
                        label: '24日'
                    },
                    {
                        value: 25,
                        label: '25日'
                    },
                    {
                        value: 26,
                        label: '26日'
                    },
                    {
                        value: 27,
                        label: '27日'
                    },
                    {
                        value: 28,
                        label: '28日'
                    },
                    {
                        value: 29,
                        label: '29日'
                    },
                    {
                        value: 30,
                        label: '30日'
                    },
                    {
                        value: 31,
                        label: '31日'
                    },
                   
                ],
                week: [
                    {
                        value: 1,
                        label: '星期一'
                    },
                    {
                        value: 2,
                        label: '星期二'
                    },
                    {
                        value: 3,
                        label: '星期三'
                    },
                    {
                        value: 4,
                        label: '星期四'
                    },
                    {
                        value: 5,
                        label: '星期五'
                    },
                    {
                        value: 6,
                        label: '星期六'
                    }
                    ,
                    {
                        value: 7,
                        label: '星期日'
                    }
                ],
                
                hour: [
                    {
                        value: 1,
                        label: '1'
                    },
                    {
                        value: 2,
                        label: '2'
                    },
                    {
                        value: 3,
                        label: '3'
                    },
                    {
                        value: 4,
                        label: '4'
                    }
                    ,
                    {
                        value: 5,
                        label: '5'
                    },
                    {
                        value: 6,
                        label: '6'
                    },
                    {
                        value: 7,
                        label: '7'
                    },
                    {
                        value: 8,
                        label: '8'
                    },
                    {
                        value: 9,
                        label: '9'
                    },
                    {
                        value: 10,
                        label: '10'
                    },
                    {
                        value: 11,
                        label: '11'
                    },
                    {
                        value: 12,
                        label: '12'
                    },
                    {
                        value: 13,
                        label: '13'
                    },
                    {
                        value: 14,
                        label: '14'
                    },
                    {
                        value: 15,
                        label: '15'
                    },
                    {
                        value: 16,
                        label: '16'
                    },
                    {
                        value: 17,
                        label: '17'
                    },
                    {
                        value: 18,
                        label: '18'
                    },
                    {
                        value: 19,
                        label: '19'
                    },
                    {
                        value: 20,
                        label: '20'
                    },
                    {
                        value: 21,
                        label: '21'
                    },
                    {
                        value: 22,
                        label: '22'
                    },
                    {
                        value: 23,
                        label: '23'
                    }
                    ,
                    {
                        value: 24,
                        label: '24'
                    }
                ],
                //验证
                rules: []
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //提交数据
                onSubmitForm: function (formName) {
                    //var mythis = this;
                    //this.$refs[formName].validate(function (valid) {
                    //    //验证通过
                    //    if (valid) {
                    //        //给Form赋值
                    //        BindFormValue(mythis);
                    //        onSubmitForm(this, '/api/BehaviorSafetyCommunicationFrequency/SaveSetFrequency', mythis.Form);
                    //        //parent.app.SetFrequencydialogVisible = false;
                    //    } else {
                    //        //验证失败
                    //        return false;
                    //    }
                    //});
                    parent.app.Form.isWarn = this.Form.Frequency.IsNot;
                    parent.app.Form.warnDays = this.Form.Frequency.MoveUp;
                    switch (this.Form.Frequency.Type) {
                        case "Month": {
                            parent.app.Form.warnType = "01";

                            break;
                        }
                        case "Week": parent.app.Form.warnType = "02"; break;
                        case "Day": parent.app.Form.warnType = "03"; break;
                    }
                    BindFormValue(this);
                    parent.app.Form.beginTimeByMonth = this.Form.Frequency.Day;
                    parent.app.Form.beginTimeByWeek = this.Form.Frequency.Week;
                    parent.app.Form.beginTimeByDay = this.Form.Frequency.Hour;
                    parent.app.updateFrequencyText();
                    parent.ListItem.dialogVisible = false;
                },
                getData: function () {
                    getData(this, '/api/BehaviorSafetyCommunicationFrequency/getfrequency?id=' + this.id);
                },
                //Checkbox控制Radio启用禁用
                IsNotRemind: function (v) {
                    this.Dom.RadioDisabled = v ? false : true;
                    this.Form.Frequency.Type = '';
                    this.Form.Frequency.MoveUp = '';
                    DisabledAll(this);
                    this.Form.Frequency.Type = 'Month';
                    this.RadioIsNotRemind('Month');
                   
                },
                //Radio控制对应的input启用禁用
                RadioIsNotRemind: function (v) {
                    //先禁用所有select
                    DisabledAll(this);
                    //启用指定radio下的select
                    switch (v) {
                        case "Year": this.Dom.SelectDisabled.AccordingYear_SelectDisabled = false; break;
                        case "Month": this.Dom.SelectDisabled.AccordingMonth_SelectDisabled = false; break;
                        case "HalfYear": this.Dom.SelectDisabled.AccordingHalfYear_SelectDisabled = false; break;
                        case "Quarter": this.Dom.SelectDisabled.AccordingQuarter_SelectDisabled = false; break;
                        case "TenDay": this.Dom.SelectDisabled.AccordingTenDay_SelectDisabled = false; break;
                        case "Week": this.Dom.SelectDisabled.AccordingWeek_SelectDisabled = false; break;
                        case "Customized": this.Dom.SelectDisabled.Customized_SelectDisabled = false; break;
                        case "Day": this.Dom.SelectDisabled.AccordingDay_SelectDisabled = false; break;
                        default: break;
                    }
                }
            },
            created: function () {
                //console.log(this.Form)
            },
            mounted: function () {
                //绑定select
                //this.month = getDicData('61');
                //this.week = getDicData('STOPTXPC');
                //this.day = getDicData('62');
                //this.hour = getDicData('64');

                //this.id = getUrlParam("id");
                //this.getData();
                //console.log(this.Form.Frequency)
                //this.$nextTick(function () {
                //加载时的默认启用状态
                //this.day = getDicData('62');
                this.Form.Frequency.IsNot = parent.app.Form.isWarn;
                this.Form.Frequency.MoveUp = parent.app.Form.warnDays;
                switch (parent.app.Form.warnType) {
                    case "01": this.Form.Frequency.Type = "Month"; break;
                    case "02": this.Form.Frequency.Type = "Week"; break;
                    case "03": this.Form.Frequency.Type = "Day"; break;
                    default: break;
                }
                this.Form.Frequency.Day = parent.app.Form.beginTimeByMonth;
                this.Form.Frequency.week = parent.app.Form.beginTimeByWeek;
                this.Form.Frequency.Hour = parent.app.Form.beginTimeByDay;

                if (this.Form.Frequency.IsNot) {
                    this.Dom.RadioDisabled = false;
                    this.RadioIsNotRemind(this.Form.Frequency.Type);
                }

                //绑定select选中值
                BindSeleted(this);
                //})



            }
        });
        //禁用全部select
        function DisabledAll(app) {
            //禁用所有select
            app.Dom.SelectDisabled.AccordingYear_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingHalfYear_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingQuarter_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingMonth_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingTenDay_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingWeek_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingDay_SelectDisabled = true;
            app.Dom.SelectDisabled.Customized_SelectDisabled = true;
            //清空所有select的选中值
            app.Dom.Value.AccordingYear_Month = ''; app.Dom.Value.AccordingYear_Day = ''; app.Dom.Value.AccordingYear_Hour = '';
            app.Dom.Value.AccordingHalfYear_Month = ''; app.Dom.Value.AccordingHalfYear_Day = ''; app.Dom.Value.AccordingHalfYear_Hour = '';
            app.Dom.Value.AccordingQuarter_Month = ''; app.Dom.Value.AccordingQuarter_Day = ''; app.Dom.Value.AccordingQuarter_Hour = '';
            app.Dom.Value.AccordingDay_Hour = '';
            app.Dom.Value.AccordingMonth_Day = ''; app.Dom.Value.AccordingMonth_Hour = '';
            app.Dom.Value.AccordingTenDay_Day = ''; app.Dom.Value.AccordingTenDay_Hour = '';
            app.Dom.Value.AccordingWeek_Week = ''; app.Dom.Value.AccordingWeek_Hour = '';
            app.Dom.Value.Customized_Text = '';
        }
        //绑定select选中值
        function BindSeleted(app) {
            switch (app.Form.Frequency.Type) {
                case "Year":
                    app.Dom.Value.AccordingYear_Month = app.Form.Frequency.Month;
                    app.Dom.Value.AccordingYear_Day = app.Form.Frequency.Day;
                    app.Dom.Value.AccordingYear_Hour = app.Form.Frequency.Hour;
                    break;
                case "HalfYear":
                    app.Dom.Value.AccordingHalfYear_Month = app.Form.Frequency.Month;
                    app.Dom.Value.AccordingHalfYear_Day = app.Form.Frequency.Day;
                    app.Dom.Value.AccordingHalfYear_Hour = app.Form.Frequency.Hour;
                    break;
                case "Quarter":
                    app.Dom.Value.AccordingQuarter_Month = app.Form.Frequency.Month;
                    app.Dom.Value.AccordingQuarter_Day = app.Form.Frequency.Day;
                    app.Dom.Value.AccordingQuarter_Hour = app.Form.Frequency.Hour;
                    break;
                case "Day":
                    app.Dom.Value.AccordingDay_Hour = app.Form.Frequency.Hour;
                    break;
                case "Month":
                    app.Dom.Value.AccordingMonth_Day = app.Form.Frequency.Day;
                    app.Dom.Value.AccordingMonth_Hour = app.Form.Frequency.Hour;
                    break;
                case "TenDay":
                    app.Dom.Value.AccordingTenDay_Day = app.Form.Frequency.Day;
                    app.Dom.Value.AccordingTenDay_Hour = app.Form.Frequency.Hour;
                    break;
                case "Week":
                    app.Dom.Value.AccordingWeek_Week = app.Form.Frequency.Week;
                    app.Dom.Value.AccordingWeek_Hour = app.Form.Frequency.Hour;
                    break;
                case "Customized":
                    app.Dom.Value.Customized_Text = app.Form.Frequency.Text;
                    break;
                default: break;
            }
        }
        //给Form赋值
        function BindFormValue(app) {

            switch (app.Form.Frequency.Type) {
                case "Year":
                    app.Form.Frequency.Month = app.Dom.Value.AccordingYear_Month;
                    app.Form.Frequency.Day = app.Dom.Value.AccordingYear_Day;
                    app.Form.Frequency.Hour = app.Dom.Value.AccordingYear_Hour;
                    break;
                case "HalfYear":
                    app.Form.Frequency.Month = app.Dom.Value.AccordingHalfYear_Month;
                    app.Form.Frequency.Day = app.Dom.Value.AccordingHalfYear_Day;
                    app.Form.Frequency.Hour = app.Dom.Value.AccordingHalfYear_Hour;
                    break;
                case "Quarter":
                    app.Form.Frequency.Month = app.Dom.Value.AccordingQuarter_Month;
                    app.Form.Frequency.Day = app.Dom.Value.AccordingQuarter_Day;
                    app.Form.Frequency.Hour = app.Dom.Value.AccordingQuarter_Hour;
                    break;
                case "Day":
                    app.Form.Frequency.Hour = app.Dom.Value.AccordingDay_Hour;
                    break;
                case "Month":
                    app.Form.Frequency.Day = app.Dom.Value.AccordingMonth_Day;
                    app.Form.Frequency.Hour = app.Dom.Value.AccordingMonth_Hour;
                    break;
                case "TenDay":
                    app.Form.Frequency.Day = app.Dom.Value.AccordingTenDay_Day;
                    app.Form.Frequency.Hour = app.Dom.Value.AccordingTenDay_Hour;
                    break;
                case "Week":
                    app.Form.Frequency.Week = app.Dom.Value.AccordingWeek_Week;
                    app.Form.Frequency.Hour = app.Dom.Value.AccordingWeek_Hour;
                    break;
                case "Customized":
                    app.Form.Frequency.Text = app.Dom.Value.Customized_Text;
                    break;
                default:
                    app.Form.Frequency.Month = "";
                    app.Form.Frequency.Day = "";
                    app.Form.Frequency.Hour = "";
                    app.Form.Frequency.Week = "";
                    app.Form.Frequency.Text = "";
                    app.Form.Frequency.MoveUp = "";
                    break;
            }
        }
    </script>
</body>

</html>